<template>
  <view>
    <!-- 模块1：收货地址 -->

    <!-- 正常情况：显示收货地址 -->
    <!-- 图标 -->
    <!-- <view>
        <u-icon name="map-fill" color="#33ff33" size="24"></u-icon>
      </view> -->
    <!-- 正常情况：显示收货地址 -->
    <view class="address">
      <view v-if="consigneeMessage.userName" class="address-info">
        <view class="address-user">
          {{ consigneeMessage.userName }} {{ consigneeMessage.telNumber }}
        </view>
        <view class="address-detail"> {{ detailedaddress }}</view>
      </view>
      <!-- 互斥情况：显示添加按钮 -->
      <view v-else class="address-btn">添加地址</view>
    </view>
    <!-- 模块2：已选商品列表 -->
    <view class="goods-list">
      <view class="cart-item" v-for="item in cartList" :key="item.goodsId">
        <view class="cart-count">商品数量 x{{ item.count }} </view>
        <navigator
          class="goods-item"
          :url="`/pages/goods/index?id=${item.goodsId}`"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          <!-- 商品图片 -->
          <image class="goods-image" :src="item.skuImage" mode="aspectFit" />
          <!-- 商品信息 -->
          <view class="goods-info">
            <view class="goods-name">{{ item.name }}</view>
            <view class="goods-type">{{ item.skuValue }}</view>
            <view class="goods-price">商品价格{{ item.skuPrice }} </view>
          </view>
        </navigator>
      </view>
    </view>
    <!-- 模块4信息弹出层 -->
    <create-popups
      @eventinput="eventinput"
      @checkvalue="checkvalue"
      :popupslist="popupslist"
      @tickvalue="tickvalue"
    ></create-popups>
    <!-- 模块5 商品总价和运费 -->
    <view class="css-settlement">
      <view class="css-settlement-total">
        <view>商品总价</view>
        <view>￥{{ totalPrices }}</view>
      </view>
      <view class="css-settlement-total">
        <view>运费</view>
        <view>￥0</view>
      </view>
    </view>
    <!-- 模块3：底部操作栏 -->
    <view class="bottom-bar">
      <view class="bottom-bar-fixed">
        <!-- 合计 -->
        <view class="total">
          <text class="total-price">￥ {{ totalPrices }}</text>
        </view>
        <!-- 结算 -->
        <!-- url="/pages/order/Order_details/index"
 -->
        <navigator
          url="/pages/order/Order_details/index"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          <view class="account" @click="submit_order"> {{ '提交订单' }} </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'chuangjiandingdan',
  data () {
    return {
      // true状态下弹出层
      truePopups: [
        {
          id: 1,
          title: '配送时间',
          text1: '不限',
          text2: '工作日',
          text3: '双休或节假日'
        }
      ],
      // 收货人信息
      consigneeMessage: {},
      // 商品列表
      merchandiseNews: [
        {
          attrsText: 'SleepEase护肩优眠1个装',
          count: 1,
          discount: null,
          id: '1672002',
          isCollect: false,
          isEffective: true,
          name: '睡着放松肩颈泰国93%天然乳胶枕蝶形护肩',
          nowOriginalPrice: '179.00',
          nowPrice: '179.00',
          picture:
            'https://yanxuan-item.nosdn.127.net/9790fcd540d6731ff7febd15ee60a7c5.png',
          postFee: 2,
          price: '179.00',
          selected: true,
          skuId: '300475322',
          specs: [{ name: '规格', valueName: 'SleepEase护肩优眠1个装' }],
          stock: 988
        },
        {
          attrsText: '中号2个装',
          count: 1,
          discount: null,
          id: '1252031',
          isCollect: false,
          isEffective: true,
          name: '换季好帮手，大容量防尘衣物收纳袋',
          nowOriginalPrice: '129.00',
          nowPrice: '129.00',
          picture:
            'https://yanxuan-item.nosdn.127.net/75f6cc2c037c09e957cbcc336cf4a652.png',
          postFee: 8,
          price: '129.00',
          selected: true,
          skuId: '1727081',
          specs: [{ name: '规格', valueName: '中号2个装' }],
          stock: 8199
        },
        {
          attrsText: '大号单个装',
          count: 1,
          discount: null,
          id: '1225018',
          isCollect: false,
          isEffective: true,
          name: '可水洗的布艺收纳盒',
          nowOriginalPrice: '39.00',
          nowPrice: '39.00',
          picture:
            'https://yanxuan-item.nosdn.127.net/5a608974e36c829898df20fd0ebf184a.png',
          postFee: 3,
          price: '39.00',
          selected: true,
          skuId: '1239122',
          specs: [{ name: '规格', valueName: '大号单个装' }],
          stock: 5571
        }
      ],
      nuber: 0,
      // 留言
      leaveword: ''
    }
  },
  // onLoad () {
  //   this.ajax_Advance_order()
  // },

  computed: {
    totalPrices () {
      return this.cartList.reduce((total, currentValue) => {
        return (total += currentValue.count * currentValue.skuPrice)

        // (total = total + currentValue.postFee * currentValue.price)
      }, 0)
    },
    popupslist () {
      const radiolist1 = [
        {
          name: '不限',
          disabled: false
        },
        {
          name: '工作日',
          disabled: false
        },
        {
          name: '双休或节假日',
          disabled: false
        }
      ]

      const popupspayway = [
        {
          name: '在线支付',
          disabled: false
        },
        {
          name: '货到付款',
          disabled: false
        }
      ]

      const popupspay = [
        {
          name: '支付宝',
          disabled: false
        },
        {
          name: '微信',
          disabled: false
        }
      ]

      return [radiolist1, popupspayway, popupspay]
    },
    detailedaddress () {
      const { provinceName, cityName, countyName, detailInfo } =
        this.consigneeMessage
      return [provinceName, cityName, countyName, detailInfo].join('')
    },
    cartList () {
      return JSON.parse(JSON.stringify(this.$store.state.shopList.cartList))
    }
  },
  methods: {
    // 添加收货地址
    async getAddress () {
      const [error, res] = await uni.chooseAddress()
      console.log(res)
      this.consigneeMessage = res
    },
    // 已经勾选的值
    checkvalue (event) {
      console.log(event)
    },
    eventinput (event) {
      this.leaveword = event
      // 输入内容
    },
    // 提交订单
    async submit_order () {
      // console.log(this.cartList.filter(item => item.count))
      // this.ajax_submit_order()
      const goods = this.cartList.map(item => {
        return {
          skuId: item.skuId,
          count: item.coun
        }
      })
      const res = await uni.$u.http.post('/member/order', {
        goods,
        addressId: '1610203903813488642',
        deliveryTimeType: 1,
        payType: 1,
        payChannel: 1,
        buyerMessage: this.leaveword
      })

      console.log(res)
      uni.showToast({
        title: res.data.message,
        icon: 'none'
      })
    }
  },
  async onLoad () {
    const res = await uni.$u.http.get('/member/order/pre')
    console.log(res)
  }
}
</script>

<style lang="scss">
page {
  background-color: #f4f4f4;
}
// 模块1：收货地址
.address {
  background-color: #fff;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .address-info {
    width: 100%;
    .address-detail {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
  }
  .address-btn {
    width: 303rpx;
    height: 90rpx;
    border-radius: 45rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #eb4450;
    color: #eb4450;
  }
}

// 模块2：已选商品列表
.goods-list {
  background-color: #fff;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  .goods-title {
    line-height: 40rpx;
    font-size: 26rpx;
  }
  .cart-item {
    position: relative;
    .cart-count {
      position: absolute;
      right: 20rpx;
      bottom: 30rpx;
    }
    // 选中最后一项
    &:last-child {
      .goods-item {
        border: none;
      }
    }
  }
}
// 全局公共样式
.goods-list {
  .goods-item {
    display: flex;
    border-bottom: 1rpx solid #ddd;
    padding: 25rpx;
    .goods-image {
      width: 170rpx;
      height: 170rpx;
      border-radius: 10rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      // 垂直方向两端对齐
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;
      .goods-name {
        // 多行超出隐藏
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .goods-type {
        line-height: 1.8;
        padding: 0 15rpx;
        margin-top: 6rpx;
        font-size: 24rpx;
        align-self: flex-start;
        border-radius: 4rpx;
        color: #888;
        background-color: #f7f7f8;
        margin-top: 20rpx;
        margin-bottom: 10rpx;
      }
      .goods-price {
        color: #eb4450;
        // 前面的价格符号
        &::before {
          content: '￥';
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}

// 底部操作栏
.bottom-bar {
  // 占位用
  height: 100rpx;
  // 定位的操作栏
  .bottom-bar-fixed {
    height: 120rpx;
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    bottom: 0;

    border-top: 1px solid #eee;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20rpx;

    .select {
      .select-radio {
        font-size: 24rpx;
        color: #999;
      }
    }

    .total {
      flex: 1;
      display: flex;
      align-items: center;
      margin-left: 40rpx;
      .total-name {
        font-size: 24rpx;
      }

      .total-price {
        color: #cf4444;
      }
    }

    .account {
      width: 220rpx;
      text-align: center;
      line-height: 72rpx;
      font-size: 26rpx;
      color: #fff;
      border-radius: 72rpx;
      background-color: #27ba9b;
    }
  }
}

.css-settlement {
  margin: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  font-size: 26rpx;
  color: #333;
  .css-settlement-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    font-size: 26rpx;
    color: #333;
  }
}
</style>
